{% extends '__base__.html' %}

{% block title %}日志{% endblock %}

{% block beforehead %}

<script>
function initVM(data) {
        Vue.filter("datetime", function (value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
            return new Date(value*1000).toLocaleString();
        });
    var vm = new Vue({
        el: '#vm',
        delimiters: ['${', '}'],
        data: {
            blogs: data.blogs,
            page: data.page
        },
        methods: {
            edit_blog: function (blog) {
                location.assign('/manage/blogs/edit?id=' + blog.id);
            },
            delete_blog: function (blog) {
                if (confirm('确认要删除“' + blog.name + '”？删除后不可恢复！')) {

                    $.post(action, blog.id, function (rtn) {
                        {
                            alert(action);
                            alert('删除成功！');
                            //refresh();
                        }
                    }, 'json');
                }
            }
        }
    });
    $('#vm').show();
}
$(function() {

    $.getJSON('/api/blogs',{page:'{{page_index}}'},function(results) {
        $('#loading').hide();
        initVM(results);
    });

});
</script>

{% endblock %}

{% block content %}

    <div class="uk-width-1-1 uk-margin-bottom">
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
                <li><a href="/manage/comments">评论</a></li>
                <li class="uk-active"><span>日志</span></li>
                <li><a href="/manage/users">用户</a></li>
            </ul>
        </div>
    </div>

    <div id="error" class="uk-width-1-1">
    </div>

    <div id="loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>

    <div id="vm" class="uk-width-1-1">
        <a href="/manage/blogs/create" class="uk-button uk-button-primary"><i class="uk-icon-plus"></i> 新日志</a>

        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-5-10">标题 / 摘要</th>
                    <th class="uk-width-2-10">作者</th>
                    <th class="uk-width-2-10">创建时间</th>
                    <th class="uk-width-1-10">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="blog in blogs" >
                    <td>
                        <a target="_blank" v-bind:href="'/blog/'+blog.id" v-text="blog.name+' / '+blog.summary"></a>
                    </td>
                    <td>
                        <a target="_blank" v-bind:href="'/user/'+blog.user_id" v-text="blog.user_name"></a>
                    </td>
                    <td>
                        <span>${blog.created_at | datetime}</span>
                    </td>
                    <td>
                        <a href="#0" v-on:click ="edit_blog(blog)"><i class="uk-icon-edit"></i></a>
                        <a href="#0" v-on:click="delete_blog(blog)"><i class="uk-icon-trash-o"></i></a>
                    </td>
                </tr>
            </tbody>
        </table>

        {% include 'page.html' %}
    </div>

{% endblock %}